<template>

	<view class="content" style="padding-top: 20rpx; background-color: #fff;border-radius: 12rpx;">
		<view class="">
		
		</view>
		<view class="" v-for="(item,index) in list.product_list" :key="index" @click="jumpTo(item)"  style="padding: 20rpx;border-bottom: 1px solid #eee;display: flex;">
			<view class="leftImg">
				<image class="" :src="item.miniImg.url" mode="aspectFill"></image>
			</view>
			<view class="rightInfor">
				<view class="inforTitle">
					<text>{{item.name}}</text>
				</view>
				
				<view class="mintitle">
					<!-- {{item.name}} -->
				</view>
				<!-- 产品标签 -->
				<view class="labelBox">
					<view class="leftlabelBox">
						<view class="labels" v-for="(iitem,iindex) in item.special_label" :key="iindex" v-if="iindex<=1">
							{{iitem.title}}
						</view>
					</view>
					<view class="rightlabelBox">
						<view class="labels" v-for="(iitem,iindex) in item.special_label" :key="iindex" v-if="iindex>1&&iindex<4">
							{{iitem.title}}
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {getScene} from "@/plugins/utils.js" 
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		loGetLocation
	} from '@/config/common';
	export default {
		props:{
		
			list:{
			    type:Object,
			    default:{
					product_list:[]
				},
			},
		
		},
		components: {
		
		},
		computed: {
			...mapState(['PrimaryColor', `userInfo`]),
			freeSpecsButtonBackground() {
				return this.$u.colorToRgba(this.$u.rgbToHex(this.PrimaryColor), 0.75)
			},
		},
		data() {
			return {
			
			}
		},
	
		watch: {
			// //数据改变请求接口
			userInfo: {
				handler: function() {
				
				},
				deep: true
			}

		},

		methods: {
			jumpTo(item){
				if(item.product_type == 52){
				//旅居
				this.onJump('/pagesPro/detail/lvjuDetail?id='+ item.id)
				}
				if(item.product_type == 50){
				//线路
				this.onJump('/pagesPro/detail/lineDetail?id=' + item.id)
				}
				if(item.product_type == 51){
				//基地
				this.onJump('/pagesPro/detail/baseDetail?id=' + item.id)
				}
			},
	},
}
</script>

<style lang="scss" scoped>
	.leftImg{
		height: 360rpx;
		width: 240rpx;
		border-radius: 12rpx;
		overflow: hidden;
		display: flex;
		image{
			height: 100%;
			width: 100%;
		}
	}
	.rightInfor{
		flex: 1;
		margin-left: 20rpx;
	}
	.inforTitle{
		font-size: 42rpx;
		line-height: 50rpx;
		 overflow: hidden;
		    -webkit-line-clamp: 2;
		    text-overflow: ellipsis;
		    display: -webkit-box;
		    -webkit-box-orient: vertical;
	}
	.mintitle{
		font-size: 34rpx;
		color: #9A9A9A;
		line-height: 40rpx;
		margin-top: 10rpx;
		overflow: hidden;
		   -webkit-line-clamp: 2;
		   text-overflow: ellipsis;
		   display: -webkit-box;
		   -webkit-box-orient: vertical;
	}
	.labelBox{
		overflow: hidden;
		bottom: 0;
	}
	.leftlabelBox{
		float: left;
	}
	.labels{
		border: 1px solid #BBBBBB;
		padding: 8rpx 20rpx;
		border-radius: 8rpx;
		margin-top: 20rpx;
		font-size: 32rpx;
	}
	.rightlabelBox{
		float: left;
		margin-left: 20rpx;
	}
</style>